<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push({ name: 'Search' })">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div>
        <div class="user" @click="$router.push({ path: `/personal/${id}` })">
          <van-icon name="manager-o" />
        </div>
      </div>
    </div>
    <van-tabs v-model="active" sticky swipeable>
      <van-tab
        v-for="(value, index) in category"
        :key="index"
        :title="value.name"
      >
        <van-list
          v-model="value.loading"
          :finished="value.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <van-pull-refresh v-model="value.isLoading" @refresh="onRefresh">
            <articleblock v-for="(v, i) in value.postList" :key="i" :post="v">
            </articleblock>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCategory } from "@/apis/category.js";
import { getPostList } from "@/apis/article.js";
import articleblock from "@/components/articleblock.vue";
export default {
  components: {
    articleblock,
  },
  data() {
    return {
      id: "",
      // 这个是当前的显示的索引值
      active: 1,
      category: [],
    };
  },
  methods: {
    // 上拉刷新
    onRefresh() {
      // 刷新时重置页码 为第一页
      this.category[this.active].pageIndex = 1;
      // 刷新时数据清空
      this.category[this.active].postList.length = 0;
      // 下拉是重置
      this.category[this.active].finished = false;
      // 重新渲染数据
      this.init();
    },

    // 下拉加载数据
    onLoad() {
      this.category[this.active].pageIndex++;
      this.init();
    },
    async init() {
      let result = await getPostList({
        pageIndex: this.category[this.active].pageIndex,
        pageSize: this.category[this.active].pageSize,
        category: this.category[this.active].id,
      });
      // 把获取到的数据储存到新添加postList的数组中;
      this.category[this.active].postList.push(...result.data.data);
      // console.log(this.category);
      // 将下拉加载组件的loading 设置为false
      this.category[this.active].loading = false;

      // 上拉刷新时重置isLoading 为false
      this.category[this.active].isLoading = false;

      // 如果没有数据了，就将下拉组件的finished重置为true
      // 没有数据的判定判定是这次的数据条数小于pagesize的长度
      if (result.data.data.length < this.category[this.active].pageSize) {
        this.category[this.active].finished = true;
      }
    },
  },
  watch: {
    active() {
      if (this.category[this.active].postList.length == 0) {
        this.init();
      }
    },
  },

  async mounted() {
    // 获取到的是字符串 需要转JSON转对象
    this.id = JSON.parse(localStorage.getItem("id") || "{}").id;
    let res = await getCategory();
    this.category = res.data.data;
    // console.log(this.category);
    // console.log(res);
    this.category = this.category.map((v) => {
      return {
        ...v, // 展开对象，我要这个对象的所有成员
        postList: [], // 这个栏目的新闻列表数据
        pageSize: 5, //这个栏目每页所显示的记录数
        pageIndex: 1, // 这个栏目 当前的页码
        loading: false, // 这个栏目的加载状态
        finished: false, // 这个栏目的数据是否完全加载完毕
        isLoading: false,
      };
    });
    this.init();
    let token = localStorage.getItem("token");
    if (!token) {
      this.active = 0;
    }
  },
};
</script>

<style lang="less" scoped>
.index {
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }
  .search {
    flex: 1;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon {
      font-size: 16px;
    }
  }
  .van-icon {
    font-size: 24px;
    padding: 0 10px;
  }
  .iconfont {
    font-size: 50px;
    padding: 0 10px;
  }
}
</style>